<template>
<div id ="add">
    <Form :model="formItem" :label-width="80">
        <FormItem label="用户名">
            <Input v-model="formItem.name" placeholder="登录名" @blur = "nameblur" />
        </FormItem>
        <FormItem label="密码">
            <Input v-model="formItem.password" type="password" placeholder="密码" @blur = "pwdblur" />
        </FormItem>
        <FormItem label="角色">
            <Select v-model="formItem.role" @blur = "roleblur">
                <option  v-for="items in roleList" value ="items.id" v-bind:key ="items.id" >{{items.departmentname}}</option>
            </Select>
        </FormItem>
        <FormItem label="手机号">
            <Input v-model="formItem.phone" placeholder="" @blur = "phblur"/>
        </FormItem>
        <FormItem label="邮箱">
            <Input v-model="formItem.email" placeholder="" @blur = "emblur" />
        </FormItem>
    </Form>
    </div>
</template>
<script>
import https from "../https.js"
export default {
    name : 'adduser',
    data () {
        return {
            formItem: {
                name : '',
                password : '',
                role : '',
                phone : '',
                email : ''
            },
            roleList : [],
            nameTip : '',
            emailTip  : '',
            phoneTip : '',
            pwdTip : '',
            nameCheck : false,
            phoneCheck : false,
            emailCheck : false,
            pwdCheck : false
        }
    },
    created (){
        this.getRoleList()
    },
    methods : {
        getRoleList() {
            https.fetchGet("/api/depart/findAll").then ( result =>{
                if(result.code == 200){
                    this.roleList = result.data
                }else {
                    console.log(result)
                }
            })
        },
        nameblur (){
            let param = {
                value : this.formItem.name,
                type : "name"
            }
            https.fetchGet("/api/pmuser/checkOnly", param).then( result =>{
                if(result.code === 200){
                    this.nameCheck = true
                }else {
                    this.nameTip ="用户名已存在"
                }
            })
            this.$emit('name' , this.formItem.name);
        },
        pwdblur (){
            let pwdReg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
            if(!pwdReg.test(this.formItem.password)){
                this.pwdTip ="密码为8-16位，至少包含一个大小写字符和数字"
            }else {
                this.pwdCheck = true;
            }
            this.$emit('password' , this.formItem.password);
        },
        phChang (){
            let phoneReg = /^1[0-9]{10}/;
            if(!phoneReg.test(this.formItem.phone)){
                this.phoneTip = "请输入正确的电话号码";
            }
            let param = {
                value : this.formItem.phone,
                type : "phone"
            }
            https.fetchGet("/api/pmuser/checkOnly", param).then( result =>{
                if(result.code === 200){
                    this.phoneCheck = true
                }else {
                    this.nameTip ="手机号码已占用"
                }
            })
            this.$emit('phone' , this.formItem.phone);
        },
        emChang (){
            let eamilReg = /[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}/;
            if(!eamilReg.test(this.formItem.email)){
                this.emailTip = "邮箱格式输入有误";
            }
            let param = {
                value : this.formItem.email,
                type : "email"
            }
            https.fetchGet("/api/pmuser/checkOnly", param).then( result =>{
                if(result.code === 200){
                    this.emailCheck = true
                }else {
                    this.emailCheck ="邮箱号码已占用"
                }
            })
            this.$emit('email' , this.formItem.email);
        },
        roleblur (){
            this.$emit('role' , this.formItem.role);
        }

    }
}
</script>

<style scoped lang ="scss">

</style>
